<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>上传验证控制的demo</title>
<script src="http://g.tbcdn.cn/kissy/k/1.4.2/seed-min.js" charset="utf-8"></script>

</head>
<body>
<h2>上传验证控制的demo</h2>
<div class="grid">
    <input type="file" class="g-u" id="J_AuthBtn" value="上传图片" name="Filedata" widthHeight-msg="图片尺寸不符！" >
</div>
<ul id="J_AuthQueue" class="grid">

</ul>
<p>组件的验证配置信息：<span class="J_AuthMsg"></span></p>

<p>
    <input class="btn btn-primary" id="J_TestRequired" value="验证是否上传了一个文件" type="button">
    <input class="btn btn-primary" id="J_TestMax" value="验证是否达到最大上传数" type="button">
</p>

<script type="text/javascript">
    var S = KISSY;
    if (S.Config.debug) {
        var srcPath = "../../../../";
        S.config({
            packages:[
                {
                    name:"gallery",
                    path:srcPath,
                    charset:"utf-8"
                }
            ]
        });
    }
    var $ = S.Node.all;
    S.use('gallery/uploader/1.5.4/index,gallery/uploader/1.5.4/themes/imageUploader/index,gallery/uploader/1.5.4/themes/imageUploader/style.css', function (S, Uploader,ImageUploader) {
        //上传组件插件
        var plugins = 'gallery/uploader/1.5.4/plugins/auth/auth,' +
                'gallery/uploader/1.5.4/plugins/tagConfig/tagConfig,' +
                'gallery/uploader/1.5.4/plugins/urlsInput/urlsInput,' +
                'gallery/uploader/1.5.4/plugins/proBars/proBars,' +
                'gallery/uploader/1.5.4/plugins/filedrop/filedrop,' +
                'gallery/uploader/1.5.4/plugins/preview/preview';
        S.use(plugins,function(S,Auth,TagConfig,UrlsInput,ProBars,Filedrop,Preview){
            var authUploader = new Uploader('#J_AuthBtn',{
                action:"upload.php",
                data:{'author':'minghe'}
            });

            //使用主题
            authUploader.theme(new ImageUploader({
                queueTarget:'#J_AuthQueue'
            }))

            //验证插件
            authUploader.plug(new Auth({
                        max:3,
                        maxSize:500,
                        required:true,
                        allowExts:'png',
                        widthHeight:function(width,height){
                            return width > 160 && height > 160;
                        },
                        allowRepeat:false
                    }))
                    //可以从html的input标签上合并配置
                    .plug(new TagConfig())
                     //url保存插件
                    .plug(new UrlsInput({target:'#J_Urls'}))
                    //进度条集合
                    .plug(new ProBars())
                    //拖拽上传
                    .plug(new Filedrop())
                    //图片预览
                    .plug(new Preview());

            //获取验证插件
            var auth = authUploader.getPlugin('auth');
            //不存在auth插件直接退出
            if(!auth) return false;
            var max = auth.get('max');
            var required = auth.get('required');
            var allowExts = auth.get('allowExts');
            var maxSize = auth.get('maxSize');
            var allowRepeat = auth.get('allowRepeat');
            var widthHeight = auth.get('widthHeight');
            $('.J_AuthMsg').text('max:'+max + ',required:' + required + ',allowExts:' + allowExts + ',maxSize:' + maxSize + ',allowRepeat:' +allowRepeat + ',widthHeight' + widthHeight);

            $('#J_TestRequired').on('click',function(ev){
                var isPass = auth.testRequired();
                alert(isPass);
            });

            $('#J_TestMax').on('click',function(ev){
                //true为还可以上传文件
                var isPass = auth.testMax();
                alert(!isPass);
            });
        });
    })

</script>
</body>
</html>